<template>
    <div>
        <el-descriptions class="margin-top" :column="1" size="smell" border>
            <el-descriptions-item>
                <template slot="label">
                    <div class="st" align="center">
                        <i class="el-icon-postcard"></i>
                        ID
                    </div>
                </template>
                <div class="infoStyle">
                    {{UserInfo.userID}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div class="st" align="center">
                        <i class="iconfont icon-yonghutubiao"></i>
                        用户名
                    </div>
                </template>
                <div class="infoStyle">
                    {{UserInfo.uname}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div class="st" align="center">
                        <i class="iconfont icon-jiankang"></i>
                        健康
                    </div>
                </template>
                <div class="infoStyle">
                    {{UserInfo.health}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div class="st" align="center">
                        <i class="iconfont icon-nianlingguangfan-02"></i>
                        年龄
                    </div>
                </template>
                <div class="infoStyle">
                    {{UserInfo.age}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div class="st" align="center">
                        <i class="iconfont icon-xingbie"></i>
                        性别
                    </div>
                </template>
                <div class="infoStyle">
                    {{UserInfo.sex}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div class="st" align="center">
                        <i class="iconfont icon-dianhua"></i>
                        电话
                    </div>
                </template>
                <div class="infoStyle">
                    {{UserInfo.tel}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div class="st" align="center">
                        <i class="iconfont icon-dizhi"></i>
                        住址
                    </div>
                </template>
                <div class="infoStyle">{{UserInfo.address}}</div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
    export default {
        name: "personalCenter",
        data() {
            return {
                UserInfo: {
                    userID: "",
                    uname: "请完善个人信息",
                    health: "请完善个人信息",
                    age: "请完善个人信息",
                    sex: "请完善个人信息",
                    tel: "请完善个人信息",
                    address: "请完善个人信息",
                },
            }
        },
        created() {
            console.log("执行了create")
            this.UserInfo.userID = window.sessionStorage.getItem('UUID')
            this.getAllUserByUUID()
        },
        methods: {
            async getAllUserByUUID() {
                const {data: res} = await this.$http.get("getUserByUUID?UUID=" + this.UserInfo.userID);
                this.UserInfo = res;
            },
        }
    }
</script>

<style scoped>
    .st {
        color: #03f3a7;
        font-size: 17px;
        /*padding-left: 34%;*/
    }
    .infoStyle{
        font-size: 17px;
        color: #0483f3;
    }
</style>